<template>
	<view class="rtl" v-if="show">
		<view class="shield">

		</view>
		<view class="shopCartPlace">
			<view class="result">
				<uv-icon name="checkmark-circle-fill" color="#40d84e" size="65"></uv-icon>
				<view class="result_text">
					{{t("Successful!")}}
				</view>
			</view>

			<view class="tip">
				{{t("After the transfer, p ease send a screenshot of the transfer to the hnance department")}}
			</view>
			<view class="overBtn" @click="CheckOrder">
				{{t("Check order detall")}}
			</view>
			<view class="footer">
				<view class="item" @click="back">
					{{t("Back")}}
				</view>
				<view class="item" @click="goToView('/pages/index/index')">
					{{t("Home")}}
					<uv-icon name="arrow-right" color="#fff"></uv-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		defineExpose
	} from "vue"
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	const show = ref(false);
	const control = (bool) => {
		show.value = bool
	}
	const CheckOrder = () => {
		// uni.navigateTo({
		// 	url: "/pages/order/orderDetail"
		// })
	}
	const back = () => {
		show.value = false
	}
	const goToView = (url) => {

		uni.switchTab({
			url: url,
			fail: () => {
				uni.navigateTo({
					url: url
				})
			}
		})

	}
	defineExpose({
		control
	})
</script>

<style lang="scss" scoped>
	@import "@/static/css/index.scss";

	.shield {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
	}

	.shopCartPlace {
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		width: 100%;
		min-height: 70%;
		// max-height: 80%;
		background: $primary-a;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
		color: #fff;

		.result {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin: 20% 50rpx 40rpx;

			.result_text {
				margin-top: 20rpx;
			}
		}

		.tip {
			margin: 0 50rpx;
		}

		.overBtn {
			border: 1px solid #fff;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			width: fit-content;
			margin: 40rpx auto;
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: $primary-b ;
			padding: 30rpx;
			border-radius: 20rpx 20rpx 0 0;
			box-sizing: border-box;

			.item {
				display: flex;
				align-items: flex-end;
			}
		}

	}
</style>